<template>
  <div class="outer_content">
    <div class="top">
      <div class="top_left">
        <div class="inner">
          <div class="line">
            <div class="title">公司/组织名称:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="info">{{ organizationName }}</div>
          </div>
          <div class="line">
            <div class="title">项目名称:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="info">{{ Itemname }}</div>
          </div>
          <div class="line">
            <div class="title">组织负责人:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="info">{{ Itemcharge }}</div>
          </div>
          <div class="line">
            <div class="title">员工数目:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="info">{{ ItemMember.length }}</div>
          </div>
        </div>
      </div>
      <div class="top_right">
        <div class="inner">
          <!-- <div class="line">
            <div class="title">项目ID:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="info">{{ ItemID }}</div>
          </div> -->
          <div class="line">
            <div class="title">成立时间:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="info">{{ createdTime }}</div>
          </div>
          <div class="line">
            <div class="title">成立天数:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="info">{{ lastedTime }}</div>
          </div>
          <div class="line">
            <div class="title">公司地址:&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div class="info">{{ organizationAddr }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div id="main" class="chart left"></div>
      <div class="middle">
        <div class="middle_item">组内人员</div>
        <div class="middle_item" v-for="(m, index) in ItemMember" :key="index">
          {{ m.name }}
        </div>
      </div>
      <div id="main2" class="chart right"></div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import axios from "axios";
import * as echarts from "echarts";
export default {
  name: "organizationInfo",
  setup() {
    let Itemname = ref("");
    let Itemcharge = ref("");
    let ItemMember = ref([]);
    let ItemID = ref("");
    let simpleInfo = ref("");
    let organizationName = ref("");
    let organizationAddr = ref("");
    let createdTime = ref();
    let lastedTime = ref("");
    let sex = reactive({
      info: [0, 0],
    });
    const store = useStore();

    onMounted(() => {
      // 随便拿一个属性出来检查,如果为空
      if (store.state.real_Item == "") {
        let data = JSON.parse(sessionStorage.getItem("cloud"));
        store.commit('useSessionStorage',[data.ItemID,data.DemandList,data.ItemList,data.main_person,data.real_Item,data.usernow,data.real_Demand])
      }
      let m = store.state.real_Item;
      Itemname.value = m.Item_name;
      Itemcharge.value = m.main_person;
      ItemMember.value = m.member;
      ItemID.value = m.Item_ID;
      simpleInfo.value = m.simple_Info;
      organizationName.value = m.organization_name;
      organizationAddr.value = m.organization_addr;
      let k = m.createdAt.split("-"),
        n = k[2][0] + k[2][1],
        j = new Date().getTime();
      k[2] = n;
      createdTime.value = k.join("-");
      // 计算日期差 begin
      var olddate = new Date(k.join("-")).getTime();
      lastedTime.value = Math.ceil(Math.abs(j - olddate) / (1000 * 3600 * 24));

      // 需求完成情况  0(未开始) 1(进行中) 2(已完成)
      console.log(store.state.real_Demand);
      let finish = [0, 0, 0];
      store.state.real_Demand.forEach((element) => {
        if (element.status == 0) {
          finish[0]++;
        } else if (element.status == 1) {
          finish[1]++;
        } else if (element.status == 2) {
          finish[2]++;
        }
      });
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "需求完成进度",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: finish[0], name: "未开始" },
              { value: finish[1], name: "进行中" },
              { value: finish[2], name: "已完成" },
            ],
          },
        ],
      });

        let x = store.state.real_Item.member;
        let list = [];
        for (let i = 0; i < x.length; i++) {
          list.push(x[i].id);
        }
        list.push(store.state.usernow.id)

        setTimeout(() => {
          draw(list);
        }, 2000);

      function send(list) {
        console.log(list)
        return axios({
          method: "post",
          url: "https://qcjk2s.api.cloudendpoint.cn/checksex",
          data: {
            list: list,
          },
        }).then((res) => {
          console.log(res.data);
          sex.info[1] = res.data[1];
          sex.info[0] = res.data[0];
        });
      }

      async function draw(list) {
        await send(list);
        console.log(sex.info);
        // 性别占比
        var myChart = echarts.init(document.getElementById("main2"));
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              name: "性别占比",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "40",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: sex.info[1], name: "男" },
                { value: sex.info[0], name: "女" },
              ],
            },
          ],
        });
      }

    });

    return {
      Itemname,
      Itemcharge,
      ItemMember,
      ItemID,
      simpleInfo,
      organizationName,
      organizationAddr,
      createdTime,
      lastedTime,
    };
  },
};
</script>

<style lang="less" scoped>
.outer_content {
  height: 100%;
  width: 100%;
  .top {
    width: 100%;
    height: 35%;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
    font-weight: bold;
    .top_left {
      width: 35%;
      height: 100%;
      border-right: 1px solid #ccc;
      float: left;
      .inner {
        height: 100%;
        width: 100%;
        margin-top: 7%;
        .line {
          height: 20%;
          width: 100%;
          .title {
            width: 50%;
            height: 100%;
            float: left;
            text-align: right;
          }
          .info {
            width: 50%;
            text-align: left;
            float: left;
            height: 100%;
          }
        }
      }
    }
    .top_right {
      width: 35%;
      height: 100%;
      border-left: 1px solid #ccc;
      float: right;
      .inner {
        height: 100%;
        width: 100%;
        margin-top: 7%;
        .line {
          height: 20%;
          width: 100%;
          .title {
            width: 50%;
            height: 100%;
            float: left;
            text-align: right;
          }
          .info {
            width: 50%;
            text-align: left;
            float: left;
            height: 100%;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 64%;
    .chart {
      width: 40%;
      height: 100%;
    }
    .middle {
      width: 19.8%;
      height: 100%;
      float: left;
      .middle_item {
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        color: #409efc;
        border-bottom: 1px solid #409efc;
        width: 100%;
      }
      border-bottom: 1px solid #ccc;
    }
    .left {
      float: left;
      border-right: 1px solid #000;
    }
    .right {
      float: right;
      border-left: 1px solid #000;
    }
  }
}
</style>